{extend name="public/base" /}
{block name="style"}
	<link rel="stylesheet" href="__PUBLIC__/admin/js/codemirror/codemirror.css">
	<link rel="stylesheet" href="__PUBLIC__/admin/js/codemirror/theme/{:config('codemirror_theme')}.css">
	<style>
		.CodeMirror,#preview_window{
			height: 465px;
			margin-left: 2px;
			margin-right: 2px;
			overflow: hidden;
		}
		#preview_window{
			overflow: hidden;
		}
		#preview_window textarea{
			display: none;
		}

		select[multiple] {
			height: 200px;
		}
		.text, .textarea {
			border-color: #eeeeee;
			background-color: #fff;
		}
		/*.has_config, .has_adminlist {*/
			/*display: block !important;*/
			/*margin-left: 0 !important;*/
			/*margin-bottom: 10px;*/
		/*}*/
		/*.has_config.hidden, .has_adminlist.hidden {*/
			/*display: none !important;*/
		/*}*/
		.form-horizontal .controls .check-tips {
			color: #999;
		}
	</style>
{/block}
{block name="content-header"}
<h5><i class="fa fa-fw fa-connectdevelop"></i> 插件快速创建</h5>
</block>
{block name="body"}
<div class="row">
	<div class="col-xs-12">
		<div class="col-xs-12">
		<!-- 表单 -->
		<form id="form" action="{:url('build')}" method="post" class="form-horizontal doc-modal-form layui-form">
			<div class="form-group">
				<label class="item-label"><span class="must">*</span>标识名 <span class="check-tips">（请输入插件标识）</span></label>
				<div class="controls">
					<input type="text" class="text form-control" name="info[name]" value="example">
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">插件名<span class="check-tips">（请输入插件名）</span></label>
				<div class="controls">
					<input type="text" class="text form-control" name="info[title]" value="示列">
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">版本<span class="check-tips">（请输入插件版本）</span></label>
				<div class="controls">
					<input type="text" class="text form-control" name="info[version]" value="0.1">
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">作者<span class="check-tips">（请输入插件作者）</span></label>
				<div class="controls">
					<input type="text" class="text form-control" name="info[author]" value="无名">
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">描述<span class="check-tips">（请输入描述）</span></label>
				<div class="controls">
					<textarea class="form-control" name="info[description]">这是一个临时描述</textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">安装后是否启用</label>
				<div class="controls">
					<input type="checkbox" name="info[status]" value="1" checked />
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">是否需要配置</label>
				<div class="controls">
					<input lay-filter="has_config" type="checkbox" name="has_config" value="1" />
				 </div>
			</div>

			<div id="has_config" class="form-group" style="display: none">
				<div class="controls margin-bottom-5">
							<textarea class="textarea form-control" name="config">
		&lt;?php
		return [
			'random'=>[//配置在表单中的键名 ,这个会是config[random]
				'title'=>'是否开启随机:',//表单的文字
				'type'=>'radio',		 //表单的类型：text、textarea、checkbox、radio、select等
				'options'=>[		 //select 和radion、checkbox的子选项
					'1'=>'开启',		 //值=>文字
					'0'=>'关闭',
				],
				'value'=>'1',			 //表单的默认值
			],
		];
							</textarea>
				</div>
				<input type="text" class="text form-control has_config" name="custom_config">
				<span class="check-tips has_config">自定义模板,注意：自定义模板里的表单name必须为config[name]这种，获取保存后配置的值用$data.config.name</span>
			</div>


			<div class="form-group">
				<label class="item-label">是否需要外部访问</label>
				<div class="controls">
					<input type="checkbox" name="has_outurl" value="1" />
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">实现的钩子方法</label>
				<div class="controls">
					<select class="select" name="hook[]" size="10" multiple required>
						{volist name="Hooks" id="vo"}
							<option value="{$vo.name}" title="{$vo.description}">{$vo.name}</option>
						{/volist}
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="item-label">是否需要后台列表</label>
				<div class="controls">
					<input type="checkbox" lay-filter="has_adminlist" name="has_adminlist" value="1" />勾选，扩展里已装插件后台列表会出现插件名的列表菜单，如系统的附件
				</div>
			</div>
			<div id="has_adminlist" class="form-group" style="display: none;">
				<div class="controls margin-bottom-5">
						<textarea class="form-control" name="admin_list">
	'model'=>'example',		//要查的表
						</textarea>
				</div>
				<input type="text" class="text form-control has_adminlist" name="custom_adminlist">
				<span class="check-tips block has_adminlist">自定义模板,注意：自定义模板里的列表变量为$_list这种,遍历后可以用listkey可以控制表头显示,也可以完全手写，分页变量用$_page</span>
			</div>
			<div class="btn-submit-group">
				<button class="btn btn-success" type="button" id="preview">预 览</button>
				<button class="btn btn-danger ajax-post iframe" target-form="form-horizontal" type="submit">确 定</button>
				<button class="btn btn-return btn-success" onclick="javascript:history.back(-1);return false;">返 回</button>
			</div>
		</form>
	</div>
	</div>
</div>
{/block}
{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/admin/js/codemirror/codemirror.js"></script>
	<script type="text/javascript" src="__PUBLIC__/admin/js/codemirror/xml.js"></script>
	<script type="text/javascript" src="__PUBLIC__/admin/js/codemirror/javascript.js"></script>
	<script type="text/javascript" src="__PUBLIC__/admin/js/codemirror/clike.js"></script>
	<script type="text/javascript" src="__PUBLIC__/admin/js/codemirror/php.js"></script>

	<script type="text/javascript">
        layui.use(['form'],function () {
            var form = layui.form;
            form.on('checkbox(has_config)', function(data){
                $('#has_config').toggle();
            });
            form.on('checkbox(has_adminlist)', function(data){
                $('#has_adminlist').toggle();
            });
        })

		$('#preview').click(function(){
			var preview_url = '{:url("preview")}';
			$.post(preview_url, $('#form').serialize(),function(data){
                if(data.code == 0){
                    layer.msg(data.msg,{'icon':5});
                    return false;
				}
                layer.open({
                    id:'preview_window',
					title:'预览插件主文件',
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    anim: 2,
                    area: ['720px', '510px'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    content:'<textarea></textarea>'

                });
                var codemirror_option = {
						lineNumbers   :true,
                    matchBrackets :true,
                    mode          :"application/x-httpd-php",
                    indentUnit    :4,
                    gutter        :true,
                    fixedGutter   :true,
                    indentWithTabs:true,
                    readOnly	  :true,
                    lineWrapping  :true,
                    height		  :500,
                    enterMode     :"keep",
                    tabMode       :"shift",
                    theme: "{:config('codemirror_theme')}"
					};
                var preview_window = $("#preview_window").removeClass(".loading").find("textarea");
				var editor = CodeMirror.fromTextArea(preview_window[0], codemirror_option);
                	editor.setValue(data);
					$(window).resize();
			});
			return false;
		});

		$('.ajax-post_custom').click(function(){
	        var target,query,form;
	        var target_form = $(this).attr('target-form');
	        var check_url = '{:url('checkForm')}';
			$.ajax({
			   type: "POST",
			   url: check_url,
			   dataType: 'json',
			   async: false,
			   data: $('#form').serialize(),
			   success: function(data){
			    	if(data.code){
    			        if( ($(this).attr('type')=='submit') || (target = $(this).attr('href')) || (target = $(this).attr('url')) ){
				            form = $('.'+target_form);
				            if ( form.get(0).nodeName=='FORM' ){
				                target = form.get(0).action;
				                query = form.serialize();
				            }else if( form.get(0).nodeName=='INPUT' || form.get(0).nodeName=='SELECT' || form.get(0).nodeName=='TEXTAREA') {
				                query = form.serialize();
				            }else{
				                query = form.find('input,select,textarea').serialize();
				            }
				            $.post(target,query).success(function(data){
				                if (data.status==1) {
				                    if (data.url) {
				                        updateAlert(data.msg + ' 页面即将自动跳转~','alert-success');
				                    }else{
				                        updateAlert(data.msg + ' 页面即将自动刷新~');
				                    }
				                    setTimeout(function(){
				                        if (data.url) {
				                            location.href=data.url;
				                        }else{
				                        	location.reload();
				                        }
				                    },1500);
				                }else{
				                    updateAlert(data.msg);
				                }
				            });
				        }
			    	}else{
			    		updateAlert(data.msg);
					}
			   }
			});

	        return false;
	    });
	</script>
{/block}
